<template>
	<view>
		<view class="status_bar">

		</view>
		<view class="search">
			<u-icon @click="back" name="arrow-left" color="#373737" size="30"
				style="width: 30px;height: 30px;"></u-icon>
			<u-search @search="search" @custom="search" placeholder="请输入关键字进行搜索" v-model="val"
				style="flex: 1;padding:0 5px;"></u-search>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-tabs :list="tabs" @click="ctabs" lineWidth="40" style="background-color: white;"></u-tabs>
		<scroll-view scroll-y="true" @scrolltolower="tolower" class="list">
			<panItem :key="index" :item="item" v-for="(item,index) in list"></panItem>
			<u-empty v-if="!startSearch&&list[0]==null" mode="search">
			</u-empty>
			<u-loadmore v-if="startSearch" status="loading" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startSearch: false,
				scrollTop: 0,
				val: null,
				page: 1,
				list: [],
				current: 0,
				tabs: [{
					name: '全部',
					type: ""
				}, {
					name: '百度云盘',
					type: "BDY"
				}, {
					name: '阿里云盘',
					type: "ALY"
				}, {
					name: '迅雷网盘',
					type: "XUNLEI"
				}, {
					name: '夸克网盘',
					type: "QUARK"
				}, {
					name: 'UC云盘',
					type: "UC"
				}]
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			tolower() {
				++this.page
				this.getList(this.val)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			ctabs(e) {
				this.current = e.index
				this.list = []
				this.page = 1
				this.getList(this.val)
			},
			search(e) {
				this.page = 1
				this.list = []
				this.getList(e)
			},
			getList(val) {
				this.startSearch = true
				let that = this
				uni.request({
					url: "http://f.x2.ink:8000/disk",
					method: 'POST',
					data: {
						"method": "getList",
						"page": this.page,
						"size": 10,
						"type": this.tabs[this.current].type,
						"value": val
					},
					success(res) {
						that.list = that.list.concat(res.data.data)
						that.startSearch = false
					}
				})
			}
		},
		onLoad(op) {
			this.val = op.val
			this.getList(this.val)
		}
	}
</script>

<style lang="scss">
	.search {
		display: flex;
		background-color: white;
		align-items: center;
		padding-top: 10px;
	}

	.status_bar {
		background-color: white;
		height: var(--status-bar-height);
	}

	.list {
		height: calc(100vh - 88px - var(--status-bar-height) / 2);
	}
</style>